<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
    <svg class="toolbaricon" fill="currentColor">
      <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
    </svg>
    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
    <ng-container *ngIf="!editing && selectionModel.selectionSize() > 0">
      <div class="badge bg-secondary text-light rounded-pill badge-corner">
        {{selectionModel.selectionSize()}}
      </div>
    </ng-container>
  </button>
  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
    <div class="list-group list-group-flush">
      <div class="list-group-item">
        <div class="input-group input-group-sm">
          <input class="form-control" type="text" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
        </div>
      </div>
      <div *ngIf="selectionModel.items" class="items">
        <ng-container *ngFor="let item of selectionModel.itemsSorted | filter: filterText">
          <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></app-toggleable-dropdown-button>
        </ng-container>
      </div>
      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
        <small class="ml-1" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}" i18n>Apply</small>
        <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
        </svg>
      </button>
    </div>
  </div>
</div>
